<template>
  <div class="wrap">
    <p class="p1">品类管理 -- 添加品类</p>

    <div class="body">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="所选分类">
          <el-select v-model="options" value-key="id" @change="change">
            <el-option
              v-for="item in option"
              :key="item.id"
              :label="item.name"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="品类名称">
          <el-input v-model="name" placeholder="请输入品类名称"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getcategory, setcategory, setcateadd } from "@/utils/request.js";
export default {
  name: "Cartadd",
  data() {
    return {
      form: {},
      option: [],
      name:"",
      options: "",
    };
  },
  created() {
    this.getcate();
  },
  methods: {
    // 获取数据
    getcate() {
      getcategory(0).then((res) => {
        // console.log(res);
        this.option = res.data;
        this.options = this.option[0].name;
      });
    },
    onSubmit() {
      if (this.name != "") {
        setcateadd({
          parentId: 0,
          categoryName: this.name,
        }).then((res) => {
            console.log(res);
            this.$router.push('/cart')
        });
      }else if(this.name == ""){
          alert('请输入品类名称')
          return
      }
    },
    // 监听下拉菜单值的变化
    change(e) {
      console.log(e);
      //   e.id
    },
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.wrap {
  .p1 {
    text-align: left;
    font-size: 40px;
    margin: 10px 0 20px 0;
  }
  .body {
    width: 600px;
    margin: 120px auto;
    text-align: left;
  }
}
</style>
